<script setup lang="ts">
import { ref } from "vue";
// 引入中文包
import zhCn from "element-plus/es/locale/lang/zh-cn";
// 更改分页文字
zhCn.el.pagination.total = "共 {total} 条";
zhCn.el.pagination.goto = "跳至";
zhCn.el.pagination.pagesize = "条/页";
zhCn.el.pagination.pageClassifier = "页";

const props = defineProps({
  getList: Function,
  total: Number,
});

const currentPage = ref(1);
const pageSize = ref(6);

const handleSizeChange = (val: number) => {
  pageSize.value = val;
  props.getList!(currentPage.value, pageSize.value);
};
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  props.getList!(currentPage.value, pageSize.value);
};
</script>

<template>
  <ElConfigProvider :locale="zhCn">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[6, 9]"
      :small="false"
      :disabled="false"
      :background="false"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="transform: translate(20%)"
    />
  </ElConfigProvider>
</template>

<style scoped lang="less"></style>
